<template>
	<div>
		<view class="bg"></view>
		<view class="content">
			<view class="userBox por">
				<image :src="user.avatar" class="avatar"></image>
				<view class="nameBox">
					<view class="name1">
						{{user.company_name || '暂无公司名'}}
					</view>
					<view class="name2">
						账户 {{user.username}}
					</view>
				</view>
				<view class="set">设置</view>
			</view>
			<view class="walletBox">
				<view class="top">
					<view class="left">我的钱包</view>
					<view class="right">积分记录</view>
				</view>
				<view class="bottom">
					<view class="afterSalesBox">
						<view class="imageIcon">累计积分</view>
						<view class="text">90,000元</view>
					</view>
					<view class="afterSalesBox">
						<view class="imageIcon">今日积分</view>
						<view class="text">30,000元</view>
					</view>
					<view class="afterSalesBox">
						<view class="imageIcon">可用积分</view>
						<view class="text">2张</view>
					</view>
				</view>
			</view>

			<view class="otherFeatures" style="height: 224rpx;">
				<view class="bottom">
					<navigator url="/pages/carList/carList" hover-class="none">
						<view class="afterSalesBox">
							<view class="imageIcon u-flex u-row-center u-col-center">
								<image src="../../static/ico _ 24 _ transport _ car@2x.png"
									style="width: 64rpx;height: 64rpx;"></image>
							</view>
							<view class="text">车辆管理</view>
						</view>
					</navigator>
					<view class="afterSalesBox">
						<view class="imageIcon u-flex u-row-center u-col-center">
							<image src="../../static/shop_outlined@2x.png" style="width: 64rpx;height: 64rpx;"></image>
						</view>
						<view class="text" style="text-align: center;">商城</view>
					</view>
					<view class="afterSalesBox">
						<view class="imageIcon u-flex u-row-center u-col-center">
							<image src="../../static/分组12@2x.png" style="width: 64rpx;height: 12rpx;"></image>
						</view>
						<view class="text">更多功能</view>
					</view>
				</view>
			</view>
		</view>
	</div>
</template>

<script>
	import {
		getUserInfo
	} from '../../common/api.config.js'
	export default {
		onShow() {
			this.getUser()
		},
		data() {
			return {
				user: {}
			}
		},
		methods: {
			async getUser() {
				var {
					code,
					data
				} = await getUserInfo()
				console.log(data);
				if (code == 1) {
					this.user = data
				}
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f7f7f7;
	}

	.bg {
		width: 750rpx;
		height: 400rpx;
		background-color: #f1dc27;
		border-radius: 0 0 80rpx 80rpx;
		position: absolute;
		top: 0;
		left: 0;
	}

	.content {
		position: absolute;
		top: 0;
		left: 0;
		z-index: 1;

		.userBox {
			display: flex;

			.avatar {
				width: 128rpx;
				height: 128rpx;
				background: rgba(240, 240, 240, 1);
				border: 6rpx solid rgba(255, 255, 255, 1);
				border-radius: 50%;
				margin: 60rpx 0 0 42rpx;
			}

			.nameBox {
				display: flex;
				flex-direction: column;
				margin: 76rpx 0 0 24rpx;

				.name1 {
					font-size: 32rpx;
					font-weight: 700;
					color: rgba(51, 51, 51, 1);
				}

				.name2 {
					// width: 158rpx;
					padding: 0px 10rpx;
					height: 36rpx;
					background: rgba(255, 255, 255, 0.6);
					font-size: 24rpx;
					font-weight: 400;
					color: rgba(51, 51, 51, 1);
					line-height: 36rpx;
					text-align: center;
					border-radius: 40rpx;
					margin-top: 16rpx;
				}
			}

			.set {
				font-size: 24rpx;
				font-weight: 400;
				color: rgba(51, 51, 51, 1);
				position: absolute;
				right: 30rpx;
				top: 80rpx;
				// margin: 80rpx 0 0 140rpx;
			}
		}

		.walletBox {
			width: 686rpx;
			height: 258rpx;
			background: rgba(255, 255, 255, 1);
			box-shadow: 0rpx 6rpx 16rpx 0rpx rgba(0, 0, 0, 0.05);
			margin: 32rpx 0 0 32rpx;
			border-radius: 20rpx;
			align-items: center;

			.top {
				display: flex;
				justify-content: space-between;
				padding: 0 28rpx;
				box-sizing: border-box;

				.left {
					font-size: 32rpx;
					font-weight: 500;
					color: rgba(56, 56, 56, 1);
					margin: 28rpx 0 0 0rpx;
				}

				.right {
					width: 172rpx;
					height: 64rpx;
					background: rgba(255, 235, 59, 1);
					border-radius: 40rpx;
					line-height: 64rpx;
					text-align: center;
					font-size: 28rpx;
					font-weight: 400;
					color: rgba(56, 56, 56, 1);
					margin-top: 18rpx;
				}
			}

			.bottom {
				display: flex;
				justify-content: space-around;

				.afterSalesBox {
					display: flex;
					flex-direction: column;
					align-items: center;
					margin-top: 52rpx;

					.imageIcon {
						font-size: 28rpx;
						font-weight: 400;
						color: rgba(102, 102, 102, 1);
					}

					.text {
						margin-top: 4rpx;
						font-size: 36rpx;
						font-weight: 500;
						color: rgba(51, 51, 51, 1);
						text-align: center;
					}
				}
			}
		}

		.otherFeatures {
			width: 686rpx;
			height: 224rpx;
			background: rgba(255, 255, 255, 1);
			box-shadow: 0rpx 6rpx 16rpx 0rpx rgba(0, 0, 0, 0.05);
			margin: 30rpx 0 0 32rpx;
			border-radius: 20rpx;
			align-items: center;
			overflow: hidden;

			.bottom {
				display: flex;
				justify-content: space-around;

				.afterSalesBox {
					display: flex;
					flex-direction: column;

					.imageIcon {
						margin-top: 40rpx;
						width: 96rpx;
						height: 96rpx;
						border-radius: 20rpx;
						background: linear-gradient(219.75deg, rgba(255, 195, 0, 1) 0%, rgba(255, 235, 59, 1) 100%);
					}

					.text {
						font-size: 24rpx;
						font-weight: 400;
						color: rgba(0, 0, 0, 1);
						margin-top: 12rpx;
					}
				}
			}
		}
	}
</style>
